<template>
  <div id="customizedCalendar">
    <el-calendar
        :first-day-of-week=7
        v-model="value">
      <template
          slot="dateCell"
          slot-scope="{date, data}">
        <div v-loading="loading" slot="reference" class="div-Calendar" @click="clickCalendar(data)" style="position: relative;z-index: 10">
          <!-- <p>{{ data.day.split('-').slice(2).join('-') }}</p> -->
          <div>
           <font size="4px" >{{ data.day.split('-').slice(2).join('-') }}</font>  
            <!-- <font  color="blue" size="1px" > {{ holiday[data.day.split('-').slice(1).join('-')]  ?  holiday[data.day.split('-').slice(1).join('-')]: ''}} </font> -->
            <!-- <font  color="red" size="1px" > {{ workday[data.day.split('-').slice(1).join('-')]  ?  workday[data.day.split('-').slice(1).join('-')]: ''}} </font> -->
                    <font  color="blue" size="1px" > {{ holiday[data.day]  ?  '休': ''}} </font>
                    <font  color="red" size="1px" > {{ workday[data.day]  ?  "班": ''}} </font>
                    <font  color="red" size="1px" > {{ work[data.day]  ?  '班': ''}} </font>
           <!-- <font  color="blue" size="1px" >  <br/> {{ rqi.indexOf(data.day.split('-').slice(1).join('-')) > -1 ?  rqineirong[data.day.split('-').slice(1).join('-')]: ''}} </font> -->

          </div>
           <div class="center" :class="getFes(data.day)?'centerone':'centertwo'">
             {{getFes(data.day)}}
           </div>
        </div>
        <div v-if="data.isSelected" id="selectP"></div>
      </template>
    </el-calendar>
    <div id="button">
      <el-button @click="skip('preYear')" type="primary" round size="mini"><i class="el-icon-arrow-left"></i>年
      </el-button>
      <el-button @click="skip('preMonth')" type="warning" round size="mini"><i class="el-icon-arrow-left"></i>月
      </el-button>
      <el-button @click="skip('preDay')" type="success" round size="mini"><i class="el-icon-arrow-left"></i>日
      </el-button>
      <el-button @click="skip('today')" type="info" round size="mini">今天</el-button>
      <el-button @click="skip('postDay')" type="success" round size="mini">日<i class="el-icon-arrow-right"></i>
      </el-button>
      <el-button @click="skip('postMonth')" type="warning" round size="mini">月<i class="el-icon-arrow-right"></i>
      </el-button>
      <el-button @click="skip('postYear')" type="primary" round size="mini">年<i class="el-icon-arrow-right"></i>
      </el-button>
    </div>
  </div>
</template>

<script>
// import moment from 'moment'
// import PubSub from 'pubsub-js'

import calendar from "@/utils/calendar.js";
import {getYearCalendarList} from "@/api/ehr/attendance_calender";

export default {
  name: "Calendar",
  data() {
    return {
      // 假期数组
      rqi:[],
      // 假期信息
      rqineirong:{},
      workday:{},
      work:[],
      holiday:{},
      value: new Date(),
            // 遮罩层
      loading: true,
    }
  },
  created() {
    // 获取节假日信息
    this.getList();
    // console.info("rest:"+this.attendance_calenderList);
  },
  computed: {
    selectDate() {
      // return moment(this.value).format("YYYY-MM-DD");
    }
  },
  methods: {
    /** 查询节假日管理 - 法定节假日列表 */
    getList() {
        // this.rqi = [
        //   '10-01',
        //   '12-25'
        // ];
        // this.rqineirong = {
        //   '10-01': '国庆节',
        //   '12-25': '圣诞节',
        // };

        // this.holiday = {

        //   '10-01': '休',
        //   '10-02': '休',
        //   '10-03': '休',
        //   '10-04': '休',
        //   '10-05': '休',
        //   '10-06': '休',
        //   '10-07': '休',
        // };
        // this.workday = {

        //   '10-08': '班',
        //   '10-09': '班',
        // };
      this.loading = true;
      getYearCalendarList('2022').then(response => {
        var list = response.calendarList;
        list.forEach((item, index) => {
          if ("rest" === item.adjustType) {
            // this.holiday.push(item.adjustmentDate);
            this.holiday[item.adjustmentDate] = "休";
          }else{
            this.workday[item.adjustmentDate] = "班";
            // this.work.push(item.adjustmentDate);
          }
          // if ("work" === item.adjustType) {
          //   this.work.push(item.adjustmentDate);
          // }
          this.loading = false;
        });
      });
        // this.rqi.push("10-01");
        // this.rqineirong["10-01"]="国庆节";

      // this.loading = true;
      // listFdjjr(this.queryParams).then(response => {
        // this.rqi = [];
        // this.rqineirong = {};
        // for(let i=0;i<response.length;i++){
        //   for(var key in response[i]){
        //     this.rqi.push(key)
        //     this.rqineirong[key] = response[i][key]
        //   }
        // }
      // });
    },
    getFes(solarDate){
      var solar = solarDate.split("-");
      var lunar = calendar.solar2lunar(solar[0], solar[1], solar[2]);
      return lunar.festival? lunar.festival:lunar.lunarFestival
    },
    skip(flag) {
      if (flag === 'preYear') this.value = new Date(this.value.setFullYear(this.value.getFullYear() - 1));
      else if (flag === 'preMonth') this.value = new Date(this.value.setMonth(this.value.getMonth() - 1));
      else if (flag === 'preDay') this.value = new Date(this.value.setDate(this.value.getDate() - 1));
      else if (flag === 'today') this.value = new Date();
      else if (flag === 'postDay') this.value = new Date(this.value.setDate(this.value.getDate() + 1));
      else if (flag === 'postMonth') this.value = new Date(this.value.setMonth(this.value.getMonth() + 1));
      else if (flag === 'postYear') this.value = new Date(this.value.setFullYear(this.value.getFullYear() + 1));
    },
    clickCalendar(data) {
      console.log(data)
      // PubSub.publish("uploadWarningResultWarningTime", data.day);
    }
  }
}
</script>

<style lang="scss" scoped>
#customizedCalendar {
  width: 100%;
  height: 100%;

  #button {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #selectP {
    width: 30px;
    height: 30px;
    background-color: #15ff2c;
    position: absolute;
    border-radius: 50%;
    opacity: 0.6;
  }

  ::v-deep .el-calendar__header {
    // 修改头部背景颜色
    background-color: #57617C;
    padding: 3px 5px;
    border: none;
    display: flex;
    justify-content: center;

    .el-calendar__button-group {
      // 隐藏原生按钮
      display: none;
    }

    .el-calendar__title {
      // 修改头部标题的字体颜色
      color: white !important;
      font-size: 18px;
      font-weight: bolder;
    }
  }

  ::v-deep .el-calendar__body {
    // 修改主题部分
    padding: 0;
  }

  ::v-deep .el-calendar-table {
    thead {
      th {
        // 修改头部星期部分
        padding: 0;
        background-color: #57617C;
        color: white;
      }
    }

    .is-selected {
      .el-calendar-day {
        p {
          // 选中日期颜色
          color: black;
        }
      }
    }

    .el-calendar-day {
      // 每天小块样式设置
      padding: 0;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;

      p {
        // 所有日期颜色
        color: black;
        z-index: 1;
        user-select: none;
        display: flex;
      }
    }
  }

  ::v-deep .el-calendar-table__row {
    .prev, .next {
      // 修改非本月
      .el-calendar-day {
        p {
          color: #f0d9d5;
        }
      }
    }

    td {
      // 修改每一个日期td标签
      &:first-child, &:last-child {
        background-color: #f5f5f5;
      }
    }
  }

  button {
    padding: 3px 10px;
  }
  .centerone{
    background: #F0F5F1;
    color:#2410d3;
  }
  .centertwo{
    background: rgba(255, 255, 255, 0.1);
    color:#fff;
  }
}

</style>

